<template>
  <el-dialog title="图标全选" :visible.sync="modal" width="40%" @close="close">
    <el-row>
      <el-col :span="3" v-for="(item,index) of imgs" :key="index" style="text-align: center" @click.native="imgSelect(item)"><img :src="'/static/img/16/'+item"/></el-col>
    </el-row>
    <div slot="footer">
      <el-button icon="el-icon-caret-left" size="mini" :disabled="index==0" @click="pre"></el-button>
      <span style="margin:0px 10px">
              共{{total}}页/第{{index+1}}页
      </span>
      <el-button icon="el-icon-caret-right" size="mini" :disabled="index==total-1" @click="next"></el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
      props:{
          type:Number,
          show:Boolean
      },
      data() {
          return{
              index:0,
              total:0,
              imgs:[],
              files:[],
              modal:false
          }
      },
      methods:{
          getFiles () {
            //   this.files = require.context('../../../static/img/16/', false, /.(png|jpg|jpeg|gif|bmp|webp)$/).keys()
            //   this.total = Math.ceil(this.files.length/100);
              this.imgs = this.files.slice(0,100)
          },
          pre() {
              this.index = this.index-1;
              this.imgs = this.files.slice(this.index*100,(this.index+1)*100)
          },
          next() {
              this.index = this.index+1;
              console.log(this.index)
              if (this.index == this.total-1) {
                  this.imgs = this.files.slice(this.index*100,this.files.length)
              } else {
                  console.log(this.index*100)
                  console.log((this.index+1)*100)
                  console.log(this.files.length)
                  this.imgs = this.files.slice(this.index*100,(this.index+1)*100)
              }
          },
          close() {
              this.$emit('close')
          },
          imgSelect(item) {
              console.log(item)
              this.$emit('select',item)
              this.close()
          }
      },
      watch:{
          show(newVal,oldVal) {
              this.modal = newVal
          }
      },
      created() {
          this.getFiles()
      }
  }
</script>
